<template>
  <header>
    <div
      class="flex items-center justify-between q-py-xs full-width"
      style="z-index: 10"
      :class="{ 'fixed-top-left': !!fixed }"
      :style="{ background: bg ?? 'white' }"
    >
      <div class="" style="width: 70px">
        <div class="center" v-if="!noBack" style="width: 50px">
          <q-btn icon="arrow_back" unelevated round @click="() => backFun ? backFun() : back()" />
        </div>
      </div>
      <div class="flex-1 center text-center" style="width: 100px; font-weight: bold; font-size: 16px">
        {{ title ?? '' }}
      </div>
      <div class="" style="width: 70px">
        <div class="flex justify-end" v-if="footer">
          <div
            class="cursor-pointer text-right q-pl-md q-pr-md q-py-sm"
            @click="footerClick"
            style="font-size: 16px"
          >
            {{ footer }}
          </div>
        </div>
      </div>
    </div>
    <div class="header-height" style="height: 50px" v-if="!!fixed"></div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

defineProps<{
  title?: string;
  bg?: string;
  fixed?: boolean;
  footer?: string;
  noBack?: boolean;
  backFun?: () => void;
}>();

const emit = defineEmits(['footerClick']);

const footerClick = () => {
  emit('footerClick');
};

const router = useRouter();
const back = () => {
  router.back();
};
</script>
